<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心语</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- <link rel="stylesheet" href="modal.css"> 新增的CSS文件 -->
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="sidebar">
                <div class="sidebar-header">
                    <h3>历史对话记录</h3>
                    <button @click="addConversationPrompt" class="add-conversation-button">新建</button>
                </div>
                <ul class="history-list">
                    <li v-for="(conv, index) in conversations" :key="conv.id"> <!-- 使用 conv.id 作为 key -->
                        <span @click="selectConversation(conv)" :class="{ active: conv === currentConversation }">
                            {{ conv.name }}
                        </span>
                        <button @click.stop="renameConversation(index)" class="rename-button">✏️</button>
                        <button @click.stop="deleteConversation(index)" class="delete-button">🗑️</button> <!-- 删除按钮 -->
                    </li>
                </ul>

            </div>


            <div class="chat-container">
                <div class="chat-header">
                    <h2>心语</h2>
                    <div class="user-info">
                        <img src="images/logo-3.png" alt="User Avatar" class="avatar" @click="toggleMenu">
                        <span id="username-display" @click="toggleMenu" class="user-info-name">{{ username }}</span>
                    </div>
                </div>
                <!-- 选择框 -->
                <div v-if="menuVisible" ref="menu" class="menu">
                    <ul>
                        <li @click="showLoginDialog">登录</li>
                        <li @click="showDatabaseConfig">配置数据库</li>
                        <li @click="logout" v-if="isLoggedIn">登出</li> <!-- 添加登出选项 -->
                    </ul>
                </div>

                <!-- 登录弹窗 -->
                <div v-if="showLogin" class="modal">
                    <div class="modal-content">
                        <span class="close" @click="showLogin = false">&times;</span>
                        <h3 class="h3-sql">登录</h3>
                        <form @submit.prevent="handleLogin">
                            <label for="username" class="label-sql">用户名:</label>
                            <input id="username" type="text" class="text-sql" v-model="username" required>
                            <label for="password" class="label-sql">密码:</label>
                            <input id="password" type="password" class="text-sql" v-model="password" required>
                            <button type="submit" class="button-sql-login">登录</button>
                        </form>
                    </div>
                </div>

                <!-- 数据库配置弹窗 -->
                <div v-if="showDatabase" class="modal">
                    <div class="modal-content">
                        <span class="close" @click="showDatabase = false">&times;</span>
                        <h3 class="h3-sql">数据库配置</h3>
                        <label class="label-sql">数据库名称:</label>
                        <input type="text" class="text-sql" v-model="databaseName" placeholder="需修改的数据库名称">
                        <label for="db-url" class="label-sql">URL:</label>
                        <input type="text" class="text-sql" id="db-url" v-model="urlDb"
                            placeholder="例如: jdbc:mysql://localhost:3306/traffic">
                        <label for="db-username" class="label-sql">数据库用户名:</label>
                        <input type="text" class="text-sql" id="db-username" v-model="usernameDb" placeholder="用户名">

                        <label for="db-password" class="label-sql">数据库密码:</label>
                        <input type="password" class="text-sql" id="db-password" v-model="passwordDb" placeholder="密码">
                        <!-- 新增的上传文件按钮及已上传文件显示 -->


                        <button @click="triggerDbFileUpload" class="button-sql">上传数据库结构文件</button>
                        <!-- 已上传文件名显示 -->
                        <span v-if="dbUploadedFileName" style="margin: 10px; color: green;">
                            已上传: {{ dbUploadedFileName }}
                        </span>
                        <br> <!-- 换行 -->
                        <input type="file" ref="dbFileInput" style="display: none;" @change="handleDbFileUpload">

                        <button @click="saveDatabaseConfig" class="button-sql" style="margin-top: 10px;">保存配置</button>
                        <button @click="addDatabase" class="button-sql">增加数据库</button>




                        <!-- 显示已连接数据库的表格 -->
                        <table v-if="connectedDatabases.length > 0" class="custom-table table-sql">
                            <thead>
                                <tr>
                                    <th>数据库名称</th>
                                    <th>连接地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="db in connectedDatabases" :key="db.name">
                                    <td>{{ db.name }}</td>
                                    <td>{{ db.url }}</td>
                                    <td>
                                        <button @click="removeDatabase(db.name)" class="button-sql">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <p v-if="connectedDatabases.length === 0">当前没有连接任何数据库。</p>
                    </div>
                </div>



                <div class="chat-messages">
                    <div v-for="(message, index) in currentConversation.messages" :key="index" :class="{
                            'message': true, 
                            'user-message': message.user, 
                            'bot-message': !message.user,
                            'chart-message': message.chart
                        }">
                        <div class="message-content">
                            <p v-if="!message.isTable && !message.chart">{{ message.text }}</p>
                            <div v-else-if="message.isTable" v-html="message.text"></div>
                            <div v-else-if="message.chart" :ref="'chart-' + index" class="chart-container"></div>
                        </div>
                    </div>
                </div>


                <div class="chat-input">
                    <input type="text" v-model="inputMessage" @keyup.enter="sendMessage"
                        placeholder="Type your message...">
                    <button @click="sendMessage">Send</button>
                    <label for="file-upload" class="custom-file-upload">📁 上传文件</label>
                    <input id="file-upload" type="file" @change="handleFileUpload">
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>

</html>